<html>
  <head>
    <meta charset="UTF-8">
    <script src="/static/jquery-1.11.1.min.js"></script>
    <script>
      function getData() {
        var ajaxConf = {
          type: 'GET',
          url: '/data',
          success: function(data) {
            render($.parseJSON(data));
          }
        }
        $.ajax(ajaxConf);
      }
      function render(data) {
        table = $('#data-table');
        table.empty();
        table.append('<tr><th>phy_addr</th><th>logic_addr</th><th>status</th><th>temperature</th><th>voltage</th><th>rssi</th></tr>');
        for (var i = 0; i < data.length; i++) {
          for (var j = 0; j < data[i].length; j++) {
            tr = '<tr><td>' + data[i][j].phy_addr + '</td>' +
                 '<td>' + data[i][j].logic_addr + '</td>' +
                 '<td>' + data[i][j].status + '</td>' +
                 '<td>' + data[i][j].temperature + '</td>' +
                 '<td>' + data[i][j].voltage + '</td>' +
                 '<td>' + data[i][j].rssi + '</td></tr>';
            table.append(tr);
          }
        }
      }
      if (typeof refresh_interval != 'undefined' && refresh_interval != null) {
        clearInterval(refresh_interval);
        refresh_interval = null;
      }
      getData();
      refresh_interval = setInterval("getData()", 5000);
    </script>
    <title>
      树莓派
    </title>
  </head>
  <body>
    <table id="data-table"></table>
  </body>
</html>
